﻿@using DevExpress.Blazor
@inject EmployeeService EmployeeService

<div class="demo-description mw-1100" id="Overview">
    <h2><DemoNavLink Link="GridColumnChooser#Overview" />Data Grid - Column Chooser</h2>
    <p>The Column Chooser is a separate window that allows users to show, hide, and reorder Data Grid columns at runtime. The Column Chooser window displays a list of all data column headers (both visible and hidden). Use the Column Chooser window to:</p>
    <ul>
        <li>Change column visibility. To show or hide a column, use the checkbox next to the column header.</li>
        <li>Reorder columns. To change column position within the grid, use the drag icon next to the column header to drag and drop it to a new position.</li>
    </ul>
    <p>To display the Column Chooser in the Data Grid’s toolbar, follow the steps below:</p>
    <ol>
        <li>Add <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.HeaderTemplate" target="_blank" rel="nofollow">HeaderTemplate</a> to the Data Grid’s markup.</li>
        <li>Add the <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumnChooserToolbarItem" target="_blank"  rel="nofollow">DxDataGridColumnChooserToolbarItem</a> item to the <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar" target="_blank" rel="nofollow">Toolbar</a> component in this template. Note that <strong>DxDataGridColumnChooserToolbarItem</strong> buttons are only used for toolbars defined in the Data Grid component.</li>
    </ol>
    <p>In this demo, the <strong>Birth Date</strong>, <strong>File Name</strong>, <strong>Title</strong>, and <strong>Notes</strong> columns are hidden. Use the Column Chooser to display these columns and reorder visible columns.</p>
</div>

<DxDataGrid Data="@DataSource" CssClass="mw-1100">
    <HeaderTemplate>
        <DxToolbar>
            <DxDataGridColumnChooserToolbarItem Alignment="ToolbarItemAlignment.Right" />
        </DxToolbar>
    </HeaderTemplate>
    <Columns>
        <DxDataGridColumn Field="@nameof(Employee.FirstName)" />
        <DxDataGridColumn Field="@nameof(Employee.LastName)" />
        <DxDataGridColumn Field="@nameof(Employee.Position)" />
        <DxDataGridDateEditColumn Field="@nameof(Employee.HireDate)" />
        <DxDataGridDateEditColumn Field="@nameof(Employee.BirthDate)" Visible="false" />
        <DxDataGridColumn Field="@nameof(Employee.FileName)" Visible="false" />
        <DxDataGridColumn Field="@nameof(Employee.Title)" Visible="false" />
        <DxDataGridColumn Field="@nameof(Employee.Notes)" Visible="false" />
    </Columns>
</DxDataGrid>

<CodeSnippet_GridColumnChooser_Default />

@code {
    IQueryable<Employee> DataSource;

    protected override async Task OnInitializedAsync() {
        DataSource = await EmployeeService.Load();
    }
}
